<!--模板开始-->
<style type="text/css">
    * {
        padding: 0px;
        margin: 0px;
        -webkit-box-sizing: border-box
    }

    body {
        background-color: white
    }

    #container {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 500px;
        height: 815px;
        overflow: hidden;
    }
    #container > img,#container > div {
        position: absolute;
    }

    .abs{position:absolute;}

    #qian {
        position: absolute;
        top: -50px;
        left: -80px;
        -webkit-transform: translate(0px,-300px);
    }

    #qian_img {
        -webkit-animation: qian_img 0.6s linear infinite alternate both;
    }

    #chui {
        position: absolute;
        top: -50px;
        left: 0px;
        -webkit-transform: translate(0px,-300px);
    }

    #chui_img {
        -webkit-animation: qian_img1 0.6s linear infinite alternate both;
    }

    #gunshua {
        position: absolute;
        top: -50px;
        left: 80px;
        -webkit-transform: translate(0px,-300px);
    }

    #gunshua_img {
        -webkit-animation: qian_img 0.6s linear infinite alternate both;
    }

    #luzhnag {
        position: absolute;
        top: -50px;
        left: 160px;
        -webkit-transform: translate(0px,-300px);
    }

    #luzhnag_img {
        -webkit-animation: qian_img1 0.6s linear infinite alternate both;
    }

    #chilun {
        position: absolute;
        top: -50px;
        left: 240px;
        -webkit-transform: translate(0px,-300px);
    }

    #chilun_img {
        -webkit-animation: qian_img 0.6s linear infinite alternate both;
    }

    #banshou {
        position: absolute;
        top: -50px;
        left: 320px;
        -webkit-transform: translate(0px,-300px);
    }

    #banshou_img {
        -webkit-animation: qian_img1 0.6s linear infinite alternate both;
    }
    #maozi {
        position: absolute;
        top: -50px;
        left: 430px;
        -webkit-transform: translate(0px,-300px);
    }

    #maozi_img {
        -webkit-animation: qian_img 0.6s linear infinite alternate both;
    }

    #shua {
        position: absolute;
        top: 354px;
        left: 490px;
        -webkit-transform: translateX(-630px);
    }

    #pagetitle {
        position: absolute;
        width: 500px;
        height: 94px;
        left:0px;
        top:360.5px;
        opacity: 0;

        overflow: hidden;
        -webkit-transform: translateX(-630px);
    }
    #titletable {
        -webkit-transform: translateX(630px);
    }
    .titletable {
        position: absolute;
        width: 500px;
        height: 94px;
        top: 0px;
        left: 0px;
        display: table;
    }
    #titlecontent {
        vertical-align:middle;
        display:table-cell;
        text-align:center;
        font-size:22px;
        line-height:33px;
        color:#fff;

    }

    #xiyiji {
        position: absolute;
        top: 440px;
        right: -24px;
        height: 284px;
        overflow: hidden;
        -webkit-transform-origin: bottom;
        -webkit-transform: translateX(250px) skew(-6deg,0deg);
    }
    #xiyiji_img {
        position: relative;
        top: 60px;
    }

    #kuaile {
        position: absolute;
        top: 730px;
        left: 60px;
        -webkit-transform-origin: bottom;
        -webkit-transform: translate(400px,50px) skew(-45deg,0deg) scale(0.6);
    }

    #kuaile_y {
        position: absolute;
        top: 752px;
        left: 64px;
        -webkit-transform-origin: bottom;
        -webkit-transform: translate(400px,50px) skew(-45deg,0deg) scale(0.6);
    }


    #tuobu {
        position: absolute;
        left: -5px;
        top: 525px;
        -webkit-transform: translateX(-300px);
    }

    #youqi {
        position: absolute;
        right: 5px;
        top: 630px;
        -webkit-transform: translateX(300px);
    }

    #diannao {
        position: absolute;
        left: -2px;
        top: 597px;
        -webkit-transform: translateX(-300px);
    }

    .qipao1{
        position: absolute;
        left: 0px;
        bottom: 50px;
        -webkit-transform: scale(.9);
        opacity: 0;
    }
    .qipao2{
        position: absolute;
        left: 15px;
        bottom: 50px;
        opacity: 0;
        -webkit-transform: scale(.9);
    }
    .qipao3{
        position: absolute;
        left: 25px;
        bottom: 50px;
        opacity: 0;
        -webkit-transform: scale(.9);
    }
    .qipao4{
        position: absolute;
        left: 70px;
        bottom: 50px;
        opacity: 0;
        -webkit-transform: scale(.9);
    }
    .qipao5{
        position: absolute;
        left: 100px;
        bottom: 50px;
        opacity: 0;
        -webkit-transform: scale(.9);
    }


    .page_ctn {
        position: absolute;
        left: 40px;
        border:solid 4px rgba(255,255,255, 1);
        box-shadow: 5px 12px 5px rgba(0,0,0, 0.2);
        opacity: 0;
    }
    .page {
    }
    .showwords {
        font-size: 18px;
        color: white;
        position: absolute;
        z-index: 1;
        bottom: 20px;
        left: 15%;
        width: 70%;
        line-height: 30px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
        letter-spacing: 2px;
    }


    .page_h {
        position: absolute;
        /*  top: 50px;
            left: 50px;*/
        width: 420px;
        height: 280px;

        opacity: 0;
        display: none;
        border:solid 4px rgba(255,255,255, 1);
        box-shadow: 5px 12px 5px rgba(0,0,0, 0.2);
    }
    .page_h_top {
        position: absolute;
        top: 56px;
        left: 50px;
    }
    .page_h_btm {
        position: absolute;
        top: 425px;
        left: 30px;
    }


    .page_v {
        position: absolute;
        /*  top: 50px;
            left: 50px;*/
        width: 260px;
        height: 390px;

        opacity: 0;
        display: none;
        border:solid 4px rgba(255,255,255, 1);
        box-shadow: 5px 12px 5px rgba(0,0,0, 0.2);

    }
    .page_v_top {
        position: absolute;
        top: 20px;
        right: 33px;
    }
    .page_v_btm {
        position: absolute;
        top: 350px;
        left: 33px;
    }
</style>
<style type="text/css">
    @-webkit-keyframes qian_img1
    {
        0%  {
            -webkit-transform: translateY(-10px);
        }
        100%  {
            -webkit-transform: translateY(0px);
        }
    }
    @-webkit-keyframes qian_img
    {
        0%  {
            -webkit-transform: translateY(0px);
        }
        100%  {
            -webkit-transform: translateY(-10px);
        }
    }
    @-webkit-keyframes page3
    {
        0%  {
            -webkit-transform: translate(400px,-100px) rotate(0deg);
            opacity: 0;
        }
        1% {
            opacity: 1;
        }
        4% {
            opacity: 1;
            -webkit-transform: translate(-10px,0px) rotate(-5deg);
        }
        11% {
            -webkit-transform: translate(0px,0px) rotate(-5deg);
        }
        88% {
            opacity: 1;
            -webkit-transform: translate(0px,0px) rotate(-5deg);
        }
        93% {
            opacity: 1;
            -webkit-transform: translate(-10px,0px) rotate(-5deg);
        }
        100% {
            opacity: 0;
            -webkit-transform: translate(400px,50px) rotate(-5deg);
        }
    }
    @-webkit-keyframes page2
    {
        0%  {
            -webkit-transform: translate(400px,0px) rotate(0deg);
            opacity: 0;
        }
        1% {
            opacity: 1;
        }
        4% {
            opacity: 1;
            -webkit-transform: translate(-10px,0px) rotate(-2deg);
        }
        11% {
            -webkit-transform: translate(0px,0px) rotate(-2deg);
        }
        88% {
            opacity: 1;
            -webkit-transform: translate(0px,0px) rotate(-2deg);
        }
        93% {
            opacity: 1;
            -webkit-transform: translate(-10px,10px) rotate(-2deg);
        }
        100% {
            opacity: 0;
            -webkit-transform: translate(400px,-200px) rotate(-2deg);
        }
    }

    @-webkit-keyframes page4
    {
        0%  {
            -webkit-transform: translate(-400px,0px) rotate(-30deg);
            opacity: 0;
        }
        1% {
            opacity: 1;
        }
        4% {
            opacity: 1;
            -webkit-transform: translate(0px,0px) rotate(3deg);
        }
        11% {
            -webkit-transform: translate(0px,0px) rotate(0deg);
        }
        88% {
            opacity: 1;
            -webkit-transform: translate(0px,0px) rotate(0deg);
        }
        93% {
            opacity: 1;
            -webkit-transform: translate(0px,0px) rotate(5deg);
        }
        100% {
            opacity: 0;
            -webkit-transform: translate(400px,200px) rotate(-30deg);
        }
    }
    @-webkit-keyframes page1
    {
        0%  {
            -webkit-transform: translate(-400px,0px) rotate(-30deg);
            opacity: 0;
        }
        1% {
            opacity: 1;
        }
        4% {
            opacity: 1;
            -webkit-transform: translate(0px,0px) rotate(5deg);
        }
        11% {
            -webkit-transform: translate(0px,0px) rotate(0deg);
        }
        88% {
            opacity: 1;
            -webkit-transform: translate(0px,0px) rotate(0deg);
        }
        93% {
            opacity: 1;
            -webkit-transform: translate(0px,0px) rotate(5deg);
        }
        100% {
            opacity: 0;
            -webkit-transform: translate(-400px,-200px) rotate(-30deg);
        }
    }

    @-webkit-keyframes qipao3
    {
        0%  {
            -webkit-transform: translate(0px,0px) scale(.9);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -webkit-transform: translate(-50px,-150px) scale(.5);
        }
    }
    @-webkit-keyframes qipao2
    {
        0%  {
            -webkit-transform: translate(0px,0px) scale(.9);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -webkit-transform: translate(20px,-100px) scale(.5);
        }
    }
    @-webkit-keyframes qipao1
    {
        0%  {
            -webkit-transform: translate(0px,0px) scale(.9);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -webkit-transform: translate(20px,-200px) scale(.5);
        }
    }
    @-webkit-keyframes diannao
    {
        0%  {
            -webkit-transform: translateX(-300px);
        }
        7%  {
            -webkit-transform: translateX(0px) skew(-6deg,0deg);
        }
        10%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg);
        }
        90%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg);
        }
        93%  {
            -webkit-transform: translateX(0px) skew(6deg,0deg);
        }
        100% {
            -webkit-transform: translateX(-300px) skew(-6deg,0deg);
        }
    }
    @-webkit-keyframes youqi
    {
        0%  {
            -webkit-transform: translateX(300px);
        }
        7%  {
            -webkit-transform: translateX(0px);
        }
        10%  {
            -webkit-transform: translateX(0px) scaleY(1.05);
        }
        14%  {
            -webkit-transform: translateX(0px) scaleY(1);
        }
        90%  {
            -webkit-transform: translateX(0px) scaleY(1);
        }
        93%  {
            -webkit-transform: translateX(0px) skew(6deg,0deg);
        }
        100% {
            -webkit-transform: translateX(300px) skew(-6deg,0deg);
        }
    }
    @-webkit-keyframes tuobu
    {
        0%  {
            -webkit-transform: translateX(-300px);
        }
        4%  {
            -webkit-transform: translateX(0px);
        }
        11%  {
            -webkit-transform: translateX(-10px);
        }
        89%  {
            -webkit-transform: translateX(-10px);
        }
        93%  {
            -webkit-transform: translateX(0px);
        }
        100% {
            -webkit-transform: translateX(-300px);
        }
    }

    @-webkit-keyframes kuaile4
    {
        0%  {
            -webkit-transform: translate(0px,13px) skew(0deg,0deg) scale(1);
        }
        25%  {
            -webkit-transform: translate(0px,13px) skew(6deg,0deg) scale(1);
        }
        50%  {
            -webkit-transform: translate(120px,13px) skew(-6deg,0deg) scale(1);
        }
        75%  {
            -webkit-transform: translate(120px,13px) skew(6deg,0deg) scale(1);
        }
        100% {
            -webkit-transform: translate(120px,13px) skew(0deg,0deg) scale(1);
        }
    }
    @-webkit-keyframes kuaile3
    {
        0%  {
            -webkit-transform: translate(120px,13px) skew(0deg,0deg) scale(1);
        }
        25%  {
            -webkit-transform: translate(120px,13px) skew(-6deg,0deg) scale(1);
        }
        50%  {
            -webkit-transform: translate(0px,13px) skew(6deg,0deg) scale(1);
        }
        75%  {
            -webkit-transform: translate(0px,13px) skew(-6deg,0deg) scale(1);
        }
        100% {
            -webkit-transform: translate(0px,13px) skew(0deg,0deg) scale(1);
        }
    }
    @-webkit-keyframes kuaile2
    {
        0%  {
            -webkit-transform: translate(0px,0px) skew(0deg,0deg) scale(1);
        }
        40%  {
            -webkit-transform: translate(0px,0px) skew(6deg,0deg) scale(1);
        }
        80%  {
            -webkit-transform: translate(140px,13px) skew(-6deg,0deg) scale(1);
        }
        100% {
            -webkit-transform: translate(120px,13px) skew(0deg,0deg) scale(1);
        }
    }
    @-webkit-keyframes kuaile1
    {
        0%  {
            -webkit-transform: translate(400px,50px) skew(-45deg,0deg) scale(0.6);
        }
        67%  {
            -webkit-transform: translate(0px,0px) skew(0deg,0deg) scale(1);
        }
        83%  {
            -webkit-transform: translate(0px,0px) skew(6deg,0deg) scale(1);
        }
        100% {
            -webkit-transform: translate(0px,0px) skew(0deg,0deg) scale(1);
        }
    }

    @-webkit-keyframes fadein
    {
        0%  {opacity: 0}
        100%    {opacity: 1}
    }
    @-webkit-keyframes fadeout
    {
        0%  {opacity: 1}
        100%    {opacity: 0}
    }

    @-webkit-keyframes titlecontent
    {
        0%  {
            -webkit-transform: translateX(630px);
        }
        50%  {
            -webkit-transform: translateX(500px);
        }
        100%  {
            -webkit-transform: translateX(0px);
        }
    }
    @-webkit-keyframes title_out
    {
        0%  {
            -webkit-transform: translateX(0px);
            opacity: 1;
        }
        100%  {
            -webkit-transform: translateX(0px);
            opacity: 0;
        }
    }
    @-webkit-keyframes title_in
    {
        0%  {
            -webkit-transform: translateX(-630px);
            opacity: 0;
        }
        5% {
            opacity: 1;
        }
        50%  {
            -webkit-transform: translateX(-500px);
        }
        100%  {
            -webkit-transform: translateX(0px);
            opacity: 1;
        }
    }
    @-webkit-keyframes shua
    {
        0%  {
            -webkit-transform: translateX(-630px);
        }
        50%  {
            -webkit-transform: translateX(-500px);
        }
        100%  {
            -webkit-transform: translateX(0px);
        }
    }

    @-webkit-keyframes qian4
    {
        0%  {
            -webkit-transform-origin: top;
            -webkit-transform: translate(0px,0px) skew(0deg,0deg);
        }
        25% {
            -webkit-transform-origin: top;
            -webkit-transform: translate(0px,0px) skew(-6deg,0deg);
        }
        60% {
            -webkit-transform-origin: top;
            -webkit-transform: translate(70px,0px) skew(6deg,0deg);
        }
        75% {
            -webkit-transform-origin: top;
            -webkit-transform: translate(70px,0px) skew(-6deg,0deg);
        }
        100%  {
            -webkit-transform-origin: top;
            -webkit-transform: translate(70px,0px) skew(1deg,0deg);
        }
    }
    @-webkit-keyframes qian3
    {
        0%  {
            -webkit-transform-origin: top;
            -webkit-transform: translate(0px,0px) skew(0deg,0deg);
        }
        25% {
            -webkit-transform-origin: top;
            -webkit-transform: translate(0px,0px) skew(-6deg,0deg);
        }
        55% {
            -webkit-transform-origin: top;
            -webkit-transform: translate(-30px,0px) skew(0deg,0deg);
        }
        75% {
            -webkit-transform-origin: top;
            -webkit-transform: translate(-30px,0px) skew(-6deg,0deg);
        }
        100%  {
            -webkit-transform-origin: top;
            -webkit-transform: translate(-30px,0px) skew(2deg,0deg);
        }
    }
    @-webkit-keyframes qian2
    {
        0%  {
            -webkit-transform: translate(0px,0px) skew(0deg,0deg);
        }
        40% {
            -webkit-transform: translate(50px,0px) skew(-6deg,0deg);
        }
        60% {
            -webkit-transform: translate(70px,0px) skew(-6deg,0deg);
        }
        80% {
            -webkit-transform: translate(90px,0px) skew(6deg,0deg);
        }
        100%  {
            -webkit-transform: translate(70px,0px) skew(0deg,0deg);
        }
    }
    @-webkit-keyframes qian1
    {
        0%  {
            -webkit-transform: translate(0px,-300px);
        }
        57% {
            -webkit-transform: translate(0px,0px);
        }
        71% {
            -webkit-transform: translate(0px,-10px);
        }
        100%  {
            -webkit-transform: translate(0px,0px);
        }
    }

    @-webkit-keyframes xiyiji
    {
        0%  {
            -webkit-transform: translateX(250px) skew(-6deg,0deg);
        }
        6%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg);
        }
        9%  {
            -webkit-transform: translateX(0px) skew(6deg,0deg);
        }
        15%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg);
        }
        16%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        17%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        18%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        19%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        21%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        22%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        23%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        24%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        25%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        27%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        28%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        29%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        30%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        31%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        32%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        34%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        35%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        36%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        37%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        38%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        39%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        41%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        42%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        43%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        44%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        45%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        46%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        48%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        49%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        50%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        51%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        52%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        53%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        55%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        56%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        57%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        58%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        59%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        60%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        62%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        61%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        62%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        63%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        64%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        65%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        67%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        68%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        69%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        70%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        71%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        72%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        74%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        75%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        76%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        77%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        78%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        79%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        81%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        82%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        83%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        84%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.02);
        }
        85%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1.01);
        }
        86%  {
            -webkit-transform: translateX(0px) skew(0deg,0deg) scaleY(1);
        }
        90% {
            -webkit-transform: translateX(0px) skew(6deg,0deg) scaleY(1);
        }
        100% {
            -webkit-transform: translateX(250px) skew(0deg,0deg) scaleY(1);
        }
    }
</style>
<body>
<div id='container'>
    <img src="{$skinurl}skin/laodong/bg.png"/>

    <div id='pagetitle'>
        <img id='title_bg' src="{$skinurl}skin/laodong/title_bg.png"/>
        <div id='titletable' class='titletable'>
            <div id='titlecontent'>
                音乐相册，打开看看
            </div>
        </div>
    </div>
    <img id='shua' src="{$skinurl}skin/laodong/shua.png"/>

    <div id='xiyiji'>
        <img id='xiyiji_img' src="{$skinurl}skin/laodong/xiyiji.png"/>

        <img id='pao1' class='qipao1' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao2' class='qipao2' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao3' class='qipao3 ' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao4' class='qipao1' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao5' class='qipao2' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao6' class='qipa1' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao7' class='qipao2' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao8' class='qipao3' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao9' class='qipao3' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao10'class='qipao1'src="{$skinurl}skin/laodong/pao.png"/>

    </div>


    <div id='tuobu'>
        <img src="{$skinurl}skin/laodong/tuobu.png"/>

        <img id='pao11' class='qipao2' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao12' class='qipao4' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao13' class='qipao3 ' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao14' class='qipao5' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao15' class='qipao2' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao16' class='qipao4' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao17' class='qipao5' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao18' class='qipao3' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao19' class='qipao5' src="{$skinurl}skin/laodong/pao.png"/>
        <img id='pao20' class='qipao4'src="{$skinurl}skin/laodong/pao.png"/>
    </div>


    <img id='youqi' src="{$skinurl}skin/laodong/youqi.png"/>

    <img id='diannao' src="{$skinurl}skin/laodong/diannao.png"/>

    <img id='kuaile_y' src="{$skinurl}skin/laodong/kuaile_y.png"/>
    <img id='kuaile' src="{$skinurl}skin/laodong/kuaile.png"/>

    <div id='page1_ctn' class='page_ctn'>
        <div id='page1' class='page'>
            <span id='word1' class='showwords'></span>
        </div>
    </div>

    <div id='page4_ctn' class='page_ctn'>
        <div id='page4' class='page'>
            <span id='word4' class='showwords'></span>
        </div>
    </div>

    <div id='page3_h' class='page_h page_h_btm'>
        <div id='word3_h' class='showwords'></div>
    </div>
    <div id='page3_v' class='page_v page_v_btm'>
        <div id='word3_v' class='showwords'></div>
    </div>

    <div id='page2_h' class='page_h page_h_top'>
        <div id='word2_h' class='showwords'></div>
    </div>
    <div id='page2_v' class='page_v page_v_top'>
        <div id='word2_v' class='showwords'></div>
    </div>



    <div id='qian'>
        <img id='qian_img' src="{$skinurl}skin/laodong/qian.png"/>
    </div>
    <div id='chui'>
        <img id='chui_img' src="{$skinurl}skin/laodong/chui.png"/>
    </div>
    <div id='gunshua'>
        <img id='gunshua_img' src="{$skinurl}skin/laodong/gunshua.png"/>
    </div>
    <div id='luzhnag'>
        <img id='luzhnag_img' src="{$skinurl}skin/laodong/luzhnag.png"/>
    </div>
    <div id='chilun'>
        <img id='chilun_img' src="{$skinurl}skin/laodong/chilun.png"/>
    </div>
    <div id='banshou'>
        <img id='banshou_img' src="{$skinurl}skin/laodong/banshou.png"/>
    </div>
    <div id='maozi'>
        <img id='maozi_img' src="{$skinurl}skin/laodong/maozi.png"/>
    </div>
</div>
</body>

<script>
    var image_size_width=[];
    var image_size_height=[];
    var image_url_index=0;
    var have_num = 0;
    var error_num = 0;
    var canshow = true;
    var reshow = false;
    var timeout = [];
    var delaytime=3500;

    function id(name)
    {
        return document.getElementById(name);
    }
    function load_images()
    {
        reshow = false;
        image_size_width=[];
        image_size_height=[];
        Onload_imgs_url=[];
        image_url_index=0;
        have_num = 0;
        error_num = 0;
        begin_titletime = new Date();
        begin_titletime = begin_titletime.getTime();
        showtitle();
        canshow = true;
        for(var i=0;i<slider_images_url.length;i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

    function image_onerror(event)
    {
        var img = event.target;
        var index = img.index;
        if(index<10)
            error_num ++;
        Onload_imgs_url[index] = 'not find';
        console.log(Onload_imgs_url[index]);
        console.log(have_num + '-' + error_num);
        if((have_num+error_num >= 10 || slider_images_url.length == (have_num+error_num)) && canshow == true)
        {
            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;
            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(dis_titletime>delaytime)
            {
                kuxuan();
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
            }
        }
    }

    function image_onload(event)
    {
        if(reshow == true)
            return;

        var img = event.target;
        var index = img.index;

        if(index<10)
        {
            have_num++;
        }
        Onload_imgs_url[index] = img.src;
        image_size_height[index] = img.height;
        image_size_width[index] = img.width;

        // console.log(Onload_imgs_url[index]);
        // console.log(have_num + '-' + error_num);

        if((have_num + error_num >= 10 ||slider_images_url.length == (have_num+error_num)) && canshow == true)
        {
            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;
            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(dis_titletime>delaytime)
            {
                kuxuan();
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
            }

        }
    }
    function showtitle()
    {
        id('qian').style.webkitAnimation = 'qian1 0.7s ease-out both';
        id('chui').style.webkitAnimation = 'qian1 0.7s 0.1s ease-out both';
        id('gunshua').style.webkitAnimation = 'qian1 0.7s 0.2s ease-out both';
        id('luzhnag').style.webkitAnimation = 'qian1 0.7s 0.3s ease-out both';
        id('chilun').style.webkitAnimation = 'qian1 0.7s 0.4s ease-out both';
        id('banshou').style.webkitAnimation = 'qian1 0.7s 0.5s ease-out both';
        id('maozi').style.webkitAnimation = 'qian1 0.7s 0.6s ease-out both';

        id('xiyiji').style.webkitAnimation = 'xiyiji 3.3s 0.5s ease-out both';
        id('kuaile').style.webkitAnimation = 'kuaile1 0.6s 0.5s ease-out both';
        id('kuaile_y').style.webkitAnimation = 'kuaile1 0.6s 0.5s ease-out both';

        id('pao1').style.webkitAnimation = 'qipao1 2s 1s ease-out both';
        id('pao2').style.webkitAnimation = 'qipao2 2s 1.1s ease-out both';
        id('pao3').style.webkitAnimation = 'qipao1 2s 1.2s ease-out both';
        id('pao4').style.webkitAnimation = 'qipao2 2s 1.3s ease-out both';
        id('pao5').style.webkitAnimation = 'qipao2 2s 1.4s ease-out both';
        id('pao6').style.webkitAnimation = 'qipao1 2s 1.5s ease-out both';
        id('pao7').style.webkitAnimation = 'qipao1 2s 1.6s ease-out both';
        id('pao8').style.webkitAnimation = 'qipao2 2s 1.7s ease-out both';
        id('pao9').style.webkitAnimation = 'qipao1 2s 1.8s ease-out both';
        id('pao10').style.webkitAnimation = 'qipao2 2s 1.9s ease-out both';



        id('shua').style.webkitAnimation = 'shua 0.6s ease-out both';
        id('titletable').style.webkitAnimation = 'titlecontent 0.6s ease-out both';

        id('pagetitle').style.webkitAnimation = 'title_in 0.6s ease-out both';

        id('titlecontent').innerHTML = e_title

    }

    function kuxuan()
    {
        id('pagetitle').style.webkitAnimation = 'title_out 0.5s ease-out both';
        id('shua').style.webkitAnimation = 'title_out 0.1s ease-out both';

        show1_1();

    }

    var show_flag = false;
    function show1_1()
    {

        var img_bili1 = setImage('1');

        id('qian').style.webkitAnimation = 'qian2 0.5s ease-out both';
        id('chui').style.webkitAnimation = 'qian2 0.5s ease-out both';
        id('gunshua').style.webkitAnimation = 'qian2 0.5s ease-out both';
        id('luzhnag').style.webkitAnimation = 'qian2 0.5s ease-out both';
        id('chilun').style.webkitAnimation = 'qian2 0.5s ease-out both';
        id('banshou').style.webkitAnimation = 'qian2 0.5s ease-out both';
        id('maozi').style.webkitAnimation = 'qian2 0.5s ease-out both';

        id('kuaile').style.webkitAnimation = 'kuaile2 0.5s ease-out both';
        id('kuaile_y').style.webkitAnimation = 'kuaile2 0.5s ease-out both';


        id('tuobu').style.webkitAnimation = 'tuobu 3.5s ease-out both';

        id('pao11').style.webkitAnimation = 'qipao1 3s 0.5s ease-out both';
        id('pao12').style.webkitAnimation = 'qipao2 3s 0.6s ease-out both';
        id('pao13').style.webkitAnimation = 'qipao3 3s 0.7s ease-out both';
        id('pao14').style.webkitAnimation = 'qipao2 3s 0.8s ease-out both';
        id('pao15').style.webkitAnimation = 'qipao3 3s 0.9s ease-out both';
        id('pao16').style.webkitAnimation = 'qipao1 2.5s 1.2s ease-out both';
        id('pao17').style.webkitAnimation = 'qipao1 3s 1.4s ease-out both';
        id('pao18').style.webkitAnimation = 'qipao2 2.5s 1.7s ease-out both';
        id('pao19').style.webkitAnimation = 'qipao3 2.5s 2s ease-out both';
        id('pao20').style.webkitAnimation = 'qipao2 2.5s 2s ease-out both';

        id('page1_ctn').style.webkitAnimation = 'page1 4s cubic-bezier(0,0,.67,.96) both';


        timeout[1] = setTimeout(show2,3500);
    }

    function show1_2()
    {
        var img_bili1 = setImage('1');

        id('youqi').style.webkitAnimation = '';

        id('page2_h').style.webkitAnimation = '';
        id('page2_v').style.webkitAnimation = '';

        id('page3_h').style.webkitAnimation = '';
        id('page3_v').style.webkitAnimation = '';

        if (show_flag) {
            id('qian').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('chui').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('gunshua').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('luzhnag').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('chilun').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('banshou').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('maozi').style.webkitAnimation = 'qian4 0.4s ease-out both';

            id('kuaile').style.webkitAnimation = 'kuaile4 0.4s ease-out both';
            id('kuaile_y').style.webkitAnimation = 'kuaile4 0.4s ease-out both';

            show_flag = false;
        } else{
            id('qian').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('chui').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('gunshua').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('luzhnag').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('chilun').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('banshou').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('maozi').style.webkitAnimation = 'qian3 0.4s ease-out both';

            id('kuaile').style.webkitAnimation = 'kuaile3 0.4s ease-out both';
            id('kuaile_y').style.webkitAnimation = 'kuaile3 0.4s ease-out both';
            show_flag = true;
        };

        id('tuobu').style.webkitAnimation = 'tuobu 3.5s ease-out both';

        id('pao11').style.webkitAnimation = 'qipao1 3s 0.5s ease-out both';
        id('pao12').style.webkitAnimation = 'qipao2 3s 0.6s ease-out both';
        id('pao13').style.webkitAnimation = 'qipao3 3s 0.7s ease-out both';
        id('pao14').style.webkitAnimation = 'qipao2 3s 0.8s ease-out both';
        id('pao15').style.webkitAnimation = 'qipao3 3s 0.9s ease-out both';
        id('pao16').style.webkitAnimation = 'qipao1 2.5s 1.2s ease-out both';
        id('pao17').style.webkitAnimation = 'qipao1 3s 1.4s ease-out both';
        id('pao18').style.webkitAnimation = 'qipao2 2.5s 1.7s ease-out both';
        id('pao19').style.webkitAnimation = 'qipao3 2.5s 2s ease-out both';
        id('pao20').style.webkitAnimation = 'qipao2 2.5s 2s ease-out both';

        id('page1_ctn').style.webkitAnimation = 'page1 3.5s cubic-bezier(0,0,.67,.96) both';

        timeout[1] = setTimeout(show2,3500);


    }


    function show2()
    {
        var img_bili1 = setImage('2');
        var img_bili2 = setImage('3');

        id('diannao').style.webkitAnimation = '';
        id('page4_ctn').style.webkitAnimation = '';

        if (img_bili2 > 1 && img_bili1 > 1) {
            id('page3_h').style.top = (425-25) +'px';
            id('page2_h').style.top = (56 + 30) +'px';

        }else {
            id('page3_h').style.top = '';
            id('page2_h').style.top = '';
        };

        if (show_flag) {
            id('qian').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('chui').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('gunshua').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('luzhnag').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('chilun').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('banshou').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('maozi').style.webkitAnimation = 'qian4 0.4s ease-out both';

            id('kuaile').style.webkitAnimation = 'kuaile4 0.4s ease-out both';
            id('kuaile_y').style.webkitAnimation = 'kuaile4 0.4s ease-out both';

            show_flag = false;
        } else{
            id('qian').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('chui').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('gunshua').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('luzhnag').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('chilun').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('banshou').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('maozi').style.webkitAnimation = 'qian3 0.4s ease-out both';

            id('kuaile').style.webkitAnimation = 'kuaile3 0.4s ease-out both';
            id('kuaile_y').style.webkitAnimation = 'kuaile3 0.4s ease-out both';
            show_flag = true;
        };

        id('youqi').style.webkitAnimation = 'youqi 3.5s ease-out both';

        id('page2_h').style.webkitAnimation = 'page2 3.5s cubic-bezier(0,0,.67,.96) both';
        id('page2_v').style.webkitAnimation = 'page2 3.5s cubic-bezier(0,0,.67,.96) both';

        id('page3_h').style.webkitAnimation = 'page3 3.4s 0.1s cubic-bezier(0,0,.67,.96) both';
        id('page3_v').style.webkitAnimation = 'page3 3.4s 0.1s cubic-bezier(0,0,.67,.96) both';


        timeout[2] = setTimeout(show3,3500);

    }

    function show3()
    {
        var img_bili = setImage('4');

        id('page1_ctn').style.webkitAnimation = '';

        id('tuobu').style.webkitAnimation = '';
        id('pao11').style.webkitAnimation = '';
        id('pao12').style.webkitAnimation = '';
        id('pao13').style.webkitAnimation = '';
        id('pao14').style.webkitAnimation = '';
        id('pao15').style.webkitAnimation = '';
        id('pao16').style.webkitAnimation = '';
        id('pao17').style.webkitAnimation = '';
        id('pao18').style.webkitAnimation = '';
        id('pao19').style.webkitAnimation = '';
        id('pao20').style.webkitAnimation = '';

        if (show_flag) {
            id('qian').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('chui').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('gunshua').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('luzhnag').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('chilun').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('banshou').style.webkitAnimation = 'qian4 0.4s ease-out both';
            id('maozi').style.webkitAnimation = 'qian4 0.4s ease-out both';

            id('kuaile').style.webkitAnimation = 'kuaile4 0.4s ease-out both';
            id('kuaile_y').style.webkitAnimation = 'kuaile4 0.4s ease-out both';

            show_flag = false;
        } else{
            id('qian').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('chui').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('gunshua').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('luzhnag').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('chilun').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('banshou').style.webkitAnimation = 'qian3 0.4s ease-out both';
            id('maozi').style.webkitAnimation = 'qian3 0.4s ease-out both';

            id('kuaile').style.webkitAnimation = 'kuaile3 0.4s ease-out both';
            id('kuaile_y').style.webkitAnimation = 'kuaile3 0.4s ease-out both';

            show_flag = true;
        };

        id('diannao').style.webkitAnimation = 'diannao 3s ease-out both';

        id('page4_ctn').style.webkitAnimation = 'page4 3.5s cubic-bezier(0,0,.67,.96) both';

        timeout[3] = setTimeout(show1_2,3500);

    }


    function setImage(idname)
    {
        if(reshow == true)
            return;

        while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
        {
            // console.log(Onload_imgs_url[image_url_index]);
            image_url_index++;
            if(image_url_index == Onload_imgs_url.length)
                image_url_index = 0;
        }

        var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
        var div,div1;
        var div_ctn;
        var height;
        var width;
        var top;
        var left;
        var word,word1;

        if(img_bili < (380/600))
        {
            height = 600;
            width = 600 * img_bili;
            top = 80;
            left = (500-width)/2 - 4;
        }
        else if(img_bili <= 1)
        {
            width = 400;
            height = 400 / img_bili;
            left = 50 - 4;
            top = (740-height)/2
        }
        else if(img_bili > 1)
        {
            width = 400;
            height = 400/img_bili;
            left = 50 - 4;
            top = (740-height)/2;
        }


        var width_div;
        var height_div;

        if (idname == '2' || idname == '3') {
            if (img_bili > 1) {
                div = id('page'+idname + '_h');
                div1 = id('page'+idname + '_v');

                word = id('word'+idname + '_h');
                word1 = id('word'+idname + '_v');

                width_div = 420;
                height_div = 280;

                width = 420;
                height = width_div / img_bili;

                if (height < height_div) {
                    width = height_div * img_bili;
                    height = height_div;
                };

            }else {
                div = id('page'+idname + '_v');
                div1 = id('page'+idname + '_h');

                word = id('word'+idname + '_v');
                word1 = id('word'+idname + '_h');

                width_div = 260;
                height_div = 390;

                height = 390;
                width = height * img_bili;
                if (width < width_div) {
                    height = width_div / img_bili;
                    width = width_div;
                };
            }

            div.style.display = 'block';
            div1.style.display = 'none';

            div.style.backgroundSize = (width) + 'px ' + (height) + 'px';
            div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
            div.style.backgroundRepeat = 'no-repeat';
            div.style.backgroundPosition = -((width - width_div)/2)+'px ' + (-((height - height_div)/2)) + 'px';


        } else{

            div = id('page'+idname);
            div_ctn = id('page'+idname + '_ctn');

            div.style.width = width + 'px';
            div.style.height = height + 'px';
            div.style.backgroundSize = (width) + 'px ' + (height) + 'px';
            div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
            div.style.backgroundRepeat = 'no-repeat';

            div_ctn.style.width = (width+ 8) + 'px';
            div_ctn.style.height = (height + 8) + 'px';
            div_ctn.style.top = (top) + 'px';
            div_ctn.style.left = (left) + 'px';

            word = id('word'+idname);
        };


        var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
        if(word_string != undefined)
        {
            word_string = word_string.replace(/[\n]/ig,'');

            word.innerText = word_string;
        }
        else
        {
            word.innerText = "";
        }

        image_url_index++;
        if(image_url_index==Onload_imgs_url.length)
            image_url_index = 0;

        return img_bili;
    }

    call_me(load_images);

    function reload_scene()
    {
        clearnode();
        reshow = true;
        setTimeout(load_images,100);
    }

    function clearnode()
    {
        for(var i = 0; i<timeout.length; i++)
        {
            clearTimeout(timeout[i]);
        }

        var xinArr = ['pagetitle','titletable','shua','chui','gunshua','luzhnag','chilun','banshou','maozi','xiyiji','kuaile','kuaile_y','pao1','pao2','pao3','pao4','pao5','pao6','pao7','pao8','pao9','pao10','pao11','pao12','pao13','pao14','pao15','pao16','pao17','pao18','pao19','pao20','youqi','page2_h','page2_v','page3_h','page3_v','page1_ctn','page4_ctn','diannao','tuobu'];

        for(var i = 0 ;i < xinArr.length ;i++)
        {
            id(xinArr[i]).style.webkitAnimation = '';
        }
    }

</script>
<!-- 模板结束 -->